<template>
	<!-- 根视图，应用了 home 类 -->
	<view class="home">
		<!-- 条件编译指令，仅在小程序平台生效 -->
		<!-- #ifdef MP -->
		<!-- 自定义搜索组件 -->
		<search-slot>
			<!-- 定义搜索框左侧插槽 -->
			<template #left>
				<!-- 搜索框左侧视图 -->
				<view class='search-left'>
					<!-- 消息图标 -->
					<view class="iconfont icon-xiaoxi">

					</view>
				</view>
			</template>
			<!-- 定义搜索框中间插槽 -->
			<template #center>
				<!-- 搜索输入框视图，可点击，点击后触发 goSearch 方法 -->
				<view class="flex-1 bg-light search-input" @click="goSearch">
					请输入搜索内容
				</view>
			</template>
			<!-- 定义搜索框右侧插槽 -->
			<template #right>
				<!-- 搜索框右侧视图，可点击，点击后触发 getScanCode 方法 -->
				<view class="search-right" @click="getScanCode">
					<!-- 扫码图标 -->
					<view class="iconfont icon-saoma">

					</view>
				</view>
			</template>
		</search-slot>
		<!-- 条件编译指令结束 -->
		<!-- #endif -->

		<!-- 地址显示视图 -->
		<view class="address-wrapper" style='width: 750rpx;height: 80rpx; line-height: 80rpx;'>
			<!-- 绑定地址数据 -->
			{{address}}
		</view>

		<!-- 水平滚动视图 -->
		<scroll-view scroll-x='true' :scroll-into-view="scrollInto" scroll-with-animation :scroll-left="scrollLeft">
			<!-- 导航栏容器 -->
			<view class="d-flex navbar-wrapper">
				<!-- 循环渲染导航栏项目 -->
				<view v-for="(item,i) in navbars" :key="i" :id="'tab'+i" :class="currentIndex==i?'active':''"
					class="flex-shrink mx-2 navbars-item" @click="changeIndex(i)">{{item.name}}</view>
			</view>
		</scroll-view>

		<!-- 滑块视图 -->
		<swiper :style="'height:'+scrollH+'px'" :current="currentIndex" @change="changeTab">
			<!-- 循环渲染滑块项目 -->
			<swiper-item v-for="(newItem,index) in newItems" :key="index">
				<!-- 滑块项目视图 -->
				<view class="swiper-item">
					<!-- 垂直滚动视图 -->
					<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" @scrolltolower="scrollToLower(index)">
						<template v-if="newItem.list.length>0">
							<block v-for="(item,n) in newItem.list" :key="n">
								<!-- 轮播图 -->
								<template v-if="item.type == 'swiper'">
									<swiper-banner :swipers="item.data"></swiper-banner>
								</template>
								<!-- 金刚区 -->
								<template v-else-if="item.type == 'indexnavs'">
									<fast-nav :getPages="getPages"></fast-nav>
								</template>
								<!-- 磁盘区 -->
								<template v-else-if="item.type == 'threeAdv'">
									<three-adv :item="item.data"></three-adv>
								</template>
								<!-- 一图广告 -->
								<template v-else-if="item.type == 'oneAdv'">
									<one-adv :title="item.data.title" :cover="item.data.cover"></one-adv>
								</template>
								<!-- 列表流list -->
								<template v-else-if="item.type == 'list'">
									<common-list :news="item.data"></common-list>
								</template>
							</block>
							<!-- 加载更多提示 -->
							<view class="py-3 text-center">{{newItem.loadmore}}</view>
						</template>
						<!-- 数据加载中 -->
						<template v-else-if="newItem.forward=='before'">
							<view class="py-3 text-center">
								<image src="/static/loading.gif" mode="" style="width: 200rpx;height: 200rpx;"></image>
							</view>
						</template>
						<!-- 无数据提示 -->
						<template v-else>
							<view class="py-3 text-center">暂无数据</view>
						</template>
					</scroll-view>
				</view>
			</swiper-item>

		</swiper>

		<!-- 注释掉的视图，用于测试 -->
		<!-- <view class="" ref='qwe' id="qwe">
            我是在学习
        </view> -->
	</view>

</template>

<script>
	import {
		fail
	} from 'assert';
	import {
		getHome,getPage
	} from '../../api/index.js'
	// 注释掉的代码，用于引入腾讯地图 SDK
	// var QQMapWX = require('../../static/qqmap-wx-jssdk.min.js');
	// 引入高德地图 SDK
	var amapFile = require('../../static/amap-wx.130.js');
	export default {
		// 定义组件数据
		data() {
			return {
				myAmapFun: "", // 高德地图实例
				address: '获取定位中...', // 地址信息
				qqmapsdk: '', // 腾讯地图 SDK 实例
				scrollH: 0, // 可使用窗口高度
				scrollLeft: '', // 滚动视图的滚动距离
				num: 0, // 导航栏项目数量
				itemWidth: 0, // 导航栏项目宽度
				scrollInto: '', // 滚动视图滚动到的元素 ID
				currentIndex: 0, // 当前选中的导航栏项目索引
				navbars: [
					// {name:'篮球'},
					// {name:'篮球2'},
				], // 导航栏项目列表（名称，ID等）
				newItems: [], //底部首页对应的->当前每个导航项对应的内容数据（列表、加载状态等）
			}
		},
		// 页面加载时触发的钩子函数
		onLoad() {
			// 注释掉的代码，用于实例化腾讯地图 SDK
			// this.qqmapsdk = new QQMapWX({
			//  key: '申请的key'
			// });

			// 实例化高德地图 SDK
			this.myAmapFun = new amapFile.AMapWX({
				key: '986358be21861a3191c162b2866124de',
			});
			// 获取当前位置信息
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					// 注释掉的代码，用于使用腾讯地图进行逆地址解析
					// this.qqmapsdk.reverseGeocoder({
					//  {
					//    latitude: res.latitude,
					//    longitude: res.longitude
					//  },
					//  success:(res2)=>{
					//      console.log('获取的经纬度逆地址res2',res2);
					//      this.address=res2.result.address
					//  },
					// fail:(error)=>{
					// 	console.log('腾讯error',error);
					// }
					// })


					// 使用高德地图进行逆地址解析
					this.myAmapFun.getRegeo({
						success: (data) => {
							console.log('高德成功回调', data);
							this.address = data[0].name
						},
						fail: (info) => {
							console.log('高德失败回调', info);
						}
					})

					// // #ifdef H5
					// let url = 'https://restapi.amap.com/v3/geocode/regeo';
					// let data = {
					//     location: res.longitude + ',' + res.latitude,
					//     key: '0f5e6fcd6c75ddefc16a5dddddc643f1',
					//     output: 'jsonp'
					// };
					// this.$jsonp(url, data)
					//     .then(res => {
					//         if (res.status === '1' && res.info === 'OK') {
					//             this.address = res.regeocode.formatted_address;
					//         } else {
					//             console.error('高德API返回错误:', res);
					//         }
					//     })
					//     .catch(err => {
					//         console.error('请求失败:', err);
					//         this.address = '定位失败，请检查网络或Key配置'; // 友好提示
					//     });
					// // #endif

				}
			});

		},
		// 导航栏上的按钮被点击时调用的函数，H5 端可见左右按钮的 index 不同
		onNavigationBarButtonTap(e) {
			console.log('导航栏上的按钮被点击时eee', e);
		},
		// 当导航栏的搜索输入被点击时调用的函数，好像是 H5 端
		onNavigationBarSearchInputClicked(e) {
			console.log('导航栏的搜索输入被点击时eee', e);
			uni.navigateTo({
				url:'/pagesA/pages/search/search'
			})
		},
		// 组件挂载完成后触发的钩子函数
		mounted() {
			this.gethome();  //加载首页数据
			// 获取系统信息
			uni.getSystemInfo({
				success: (res) => {
					console.log('获取系统的信息res', res) // 获取系统的信息
					// 计算可使用窗口高度，单位为 px
					this.scrollH = res.windowHeight - uni.upx2px(256);
				}
			});
			// 注释掉的代码，用于测试获取元素
			// setTimeout(()=>{
			//  // vue3 可用的写法
			//  // console.log('222222222',uni.createSelectorQuery().in(this).select("#qwe"));
			//  // console.log('111111111',uni.getElementById('qwe'));

			// },2000)
			// console.log('22222222222222',this.$refs.qwe);

			setTimeout(() => {
				// 获取导航栏项目的节点信息
				let dom = uni.createSelectorQuery().in(this).select(".navbars-item");
				console.log('获取节点dom', dom);
				dom.boundingClientRect((data) => {
					// console.log("得到布局位置信息" + JSON.stringify(data));
					// console.log("节点离页面顶部的距离为" + data.top);
					this.num = this.navbars.length; // 记录导航栏项目数量
					this.itemWidth = data.width + 40 // 计算导航栏项目宽度
					console.log('itemWith的宽度', this.itemWidth);
				}).exec();
			}, 500)

		},
		computed: {
			getPages() {
				let pagge = []
				// list 报错，是指可能在计算的时候没有拿到currentIndex，所以需要判断一下
				if (this.newItems[this.currentIndex]) {
					this.newItems[this.currentIndex].list.forEach(item => {
						// 方法：对象 => 数组Object.values() 
						if (item.type == 'indexnavs') {
							// item.data  Object.values()  Object.keys()  forin
							let indexnav = Object.values(item.data)
							console.log('对象转数组itemnav=>', indexnav);
							// [0,1,2,3,4,5,6,7,8,9] = [[0,1,2,3,4,5,6,7],[8,9]]
							//                               0               1
							//  Math.floor(0/8)  = 0
							//  Math.floor(1/8)  = 0
							//  ……
							//  Math.floor(7/8)  = 0
							//  Math.floor(8/8)  = 1
							//  Math.floor(9/8)  = 1
							indexnav.forEach((v, index) => {
								// pagge[]可能存在未空的情况，所以需要判断一下
								let page = Math.floor(index / 8)
								if (!pagge[page]) { //确保pagge[page]必须是一个数组
									pagge[page] = []
								}
								pagge[page].push(v)
								// console.log('pagge=>', pagge);
							})

						}
					})
				}
				return pagge
			}
		},
		// 定义组件方法
		methods: {
			gethome() {
				getHome().then(res => { //.then()方法是基于lunch的Promise实现的，它对应的是utils的request.js中响应拦截的retuen数据
					console.log('res=>', res); //res就是return返回的数据
					this.navbars = res.data.category
					for (var i = 0; i < this.navbars.length; i++) {
						// 在进入第二个之前 做个判断 第一次进入之前是before
						let forward=i==0?'after':'before'
						let obj = {
							list: [],
							loadmore:'加载更多...',
							forward:forward
						}
						if (i == 0) {
							obj.list = res.data.data
						}
						this.newItems.push(obj)
						console.log('newItems', this.newItems);
					}
				})
			},
			getpage(callback=false){
				let id=this.navbars[this.currentIndex].id;
				let obj=this.newItems[this.currentIndex];
				console.log('打印当前list数据的数量obj.list.length =>',obj.list.length);
				// 问题：obj.list.length/5这个地方会导致network查看到的值不对，回退点击时显示的是第二页
				let page=Math.floor(obj.list.length/5)+1
				obj.forward='before';
				getPage(id,page).then(res=>{
					console.log('getPage的res=>',res);
					let data=res.data;
					console.log('9999999999999',data);
					if(data){   //判断是否有数据
						// 把第二页的数据，加到第一页上去
						obj.list=[...obj.list,...data]  
						console.log('原来的第一个数据+现在的数据',obj.list);
						// 如果页面数据小于5，代表后面没有数据了，文本变成没有更多了
						obj.loadmore=data.length<5?'没有更多...':'加载更多...'
					}
					obj.forward='after';
					if(typeof callback=='function'){
						callback()
					}
				})
			},
			scrollToLower(index){
				// 加载更多  加载中  没有更多
				let obj=this.newItems[this.currentIndex];
				if(obj.loadmore == '没有更多...'){
					return;
				}else{
					obj.loadmore='加载中...'
					setTimeout(()=>{
						this.getpage(()=>{
							uni.showToast({
								title:'加载成功',
								duration:1000
							})
						})
					},1000)
				}
				this.getpage()
				console.log('触底了',index);
			},
			// 跳转到搜索页
			goSearch() {
				uni.navigateTo({
					url: '/pagesA/pages/search/search'
				})
			},
			// 扫码
			getScanCode() {
				uni.scanCode({
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					},
					fail: (error) => {
						console.log('失败', error);
					},
					complete: (res) => {
						console.log('扫码信息res', res);
					}
				});
			},
			// 切换标题
			changeIndex(index) {
				this.currentIndex = index;// 更新当前选中的导航栏项目索引
				this.scrollInto = 'tab' + index;// 更新滚动视图滚动到的元素 ID
				this.scrollLeft = this.itemWith * (index - 1) + 'rpx';// 更新滚动视图的滚动距离
				console.log('左滑动', this.scrollLeft);
			},
			// 监听 swiper 切换标题
			changeTab(e) {
				// console.log('changeTab事件eee', e);
				this.currentIndex = e.detail.current;// 更新当前选中的导航栏项目索引
				this.scrollInto = 'tab' + e.detail.current;// 更新滚动视图滚动到的元素 ID
				this.scrollLeft = this.itemWith * (e.detail.current - 1) + 'rpx'// 更新滚动视图的滚动距离
				// 判断：如果已经进入了就不要再请求数据了,如果不加这个判断它就会请求第二页第三页
				// =='before'说明之前没有进入过第二个页面，即首页->小米或者...，这一次是第一次进入，第一次是必须要请求的，之后来回切换则不用再次请求了
				if(this.newItems[this.currentIndex].forward=='before'){
					this.getpage()
				}else{
					return;
				}
			}

		}
	}
</script>

<style scoped>
	/* 搜索框左侧和右侧视图样式 */
	.search-left,
	.search-right {
		width: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
	}

	/* 搜索框左侧和右侧图标样式 */
	.search-left .iconfont,
	.search-right .iconfont {
		font-size: 32rpx;
	}

	/* 搜索输入框样式 */
	.search-input {
		height: 60rpx;
		line-height: 60rpx;
		color: #ccc;
		font-size: 28rpx;
		text-indent: 20rpx;
		border-radius: 30rpx;

	}

	/* 导航栏容器样式 */
	.navbar-wrapper {
		width: 750rpx;
		height: 88rpx;
		line-height: 100rpx;
		/* background-color: rgba(255, 0, 0, 0.2); */
		transform: translateY(-20rpx);
		font-size: 28rpx;
	}
	
</style>